<div class="m-2">
    <i class="fa fa-eye mr-1"></i><label class="title">{{proj_name}}假日管理</label>
    <hr class="m-0">

    <div id="calendar" style="font-weight: 700; margin: 8px 32px;">
    </div>

    <div class="modal" id="event-modal" style="display: none;">
        <div class="modal-dialog model-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">假日信息</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                </div>
                <div class="modal-body">
                    <div id="err"></div>

                    <form>
                        <input type="hidden" name="hid" value="">
                        <div class="form-group row">
                            <label for="min-date" class="col-sm-4 col-form-label">描述</label>
                            <div class="col-sm-7">
                                <input name="hname" type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="min-date" class="col-sm-4 col-form-label">时间</label>
                            <div class="col-sm-7">
                                <div class="input-group input-daterange" data-provide="datepicker">
                                    <input name="start_time" type="text" class="form-control" data-date-format="yyyy-mm-dd">
                                    <div class="input-group-append"><span class="input-group-text">至</span></div>
                                    <input name="end_time" type="text" class="form-control" data-date-format="yyyy-mm-dd">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="save-event">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

function editEvent(event) {
    $('#event-modal input[name="hid"]').val(event ? event.id : '');
    $('#event-modal input[name="hname"]').val(event ? event.name : '');
    $('#event-modal input[name="start_time"]').datepicker('update', event ? event.startDate : '');
    $('#event-modal input[name="end_time"]').datepicker('update', event ? event.endDate : '');
    $('#event-modal #err').empty();
    $('#event-modal').modal();
}

function deleteEvent(event) {
    event.pid = '{{proj_id}}';
    $.post('/dashboard/projects/del_holiday', event, function(ret) {
        if (!ret.ok) {
            alert('删除失败：' + ret.err_msg);
        } else {
            last_filter_menu.click();
        }
    });
}

function saveEvent() {
    var ev = {
        id: $('#event-modal input[name="hid"]').val(),
        pid: '{{proj_id}}',
        name: $('#event-modal input[name="hname"]').val(),
        start_time: $('#event-modal input[name="start_time"]').val(),
        end_time: $('#event-modal input[name="end_time"]').val()
    }
    
    if (!ev.name || ev.name.length == 0) {
        show_error('#event-modal #err', '出错了', '假日描述不可为空');
        return;
    }

    if(ev.id) {
        $.post('/dashboard/projects/edit_holiday', ev, function(ret) {
            if (!ret.ok) {
                show_error('#event-modal #err', '更新失败', ret.err_msg);
            } else {
                $('#event-modal').modal('hide');
                last_filter_menu.click();
            }
        });
    } else {
        $.post('/dashboard/projects/add_holiday', ev, function(ret) {
            if (!ret.ok) {
                show_error('#event-modal #err', '创建失败', ret.err_msg);
            } else {
                $('#event-modal').modal('hide');
                last_filter_menu.click();
            }
        });
    }
}

$(function() {
    var data = $.parseJSON('{*holidays*}');
    $.each(data, function(_, info) {
        info.startDate = new Date(info.startDate);
        info.endDate = new Date(info.endDate);
    });

    $('#calendar').calendar({
        style: 'background',        
        dataSource: data,
        enableContextMenu: true,
        enableRangeSelection: true,
        displayDisabledDataSource: true,
        contextMenuItems:[
            {
                text: '修改',
                click: editEvent
            },
            {
                text: '删除',
                click: deleteEvent
            }
        ],
        selectRange: function(e) {
            editEvent({ startDate: e.startDate, endDate: e.endDate });
        },
        mouseOnDay: function(e) {
            if(e.events.length > 0) {
                var content = '';
                
                for(var i in e.events) {
                    content += '<div class="event-tooltip-content">'
                                + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
                                + '</div>';
                }
            
                $(e.element).popover({ 
                    trigger: 'manual',
                    container: 'body',
                    html:true,
                    content: content
                });
                
                $(e.element).popover('show');
            }
        },
        mouseOutDay: function(e) {
            if(e.events.length > 0) {
                $(e.element).popover('hide');
            }
        },
        dayContextMenu: function(e) {
            $(e.element).popover('hide');
        },
    });
    
    $('#save-event').click(function() {
        saveEvent();
    });
});
</script>